<template>
    <div class="user">
        <!-- 导航栏 -->
        <van-nav-bar>
            <!-- 左边的logo盒 -->
            <template #left>
                <div class="left-box" @click="goHome">
                    <div class="logo">
                        <img
                            class="auto-img"
                            src="../assets/home_active.png"
                            alt=""
                        />
                    </div>
                    <div class="logo-title">Luckin Coffee</div>
                </div>
            </template>

            <!-- 右边的逛一逛盒 -->
            <template #right>
                <div class="right-box" @click="goHome">先逛一逛</div>
            </template>
        </van-nav-bar>

        <!-- 二级路由组件插座 -->
        <div><router-view /></div>
    </div>
</template>

<script>
export default {
    name: "User",

    methods: {
        // 跳转到 首页路由
        goHome() {
            this.$router.push({ name: "Home" });
        },
    },
};
</script>

<style lang="less" scoped>
.user {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;

    .left-box {
        height: 80%;
        font-weight: 600;
        display: flex;
        align-items: center;
        color: #646566;
        font-size: 16px;

        .logo {
            height: 100%;
            margin-right: 12px;

            .auto-img {
                height: 100%;
            }
        }
    }

    .right-box {
        font-weight: 600;
        color: #0c34ba;
    }
}
</style>